import { Button, Col, Form, Input, Row, Select, Space, Table } from 'antd';
import { useCallback, useState } from 'react';
import { PlusOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import basicService from '../../../service/basic/basic.service';
import { useRequest } from '../../../lib/request';

const { Option } = Select;
const delFlagMap = new Map([
  [false, '正常'],
  [true, '停用'],
]);
function CoreEnterpriseList(props) {
  const navigate = useNavigate();
  const [pageNum, setPageNum] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [searchForm, setSearchForm] = useState({
    coreCustName: '',
    dataOrgId: '',
    delFlag: '',
  });
  const [form] = Form.useForm();
  const params = {
    pageNum,
    pageSize,
    ...searchForm,
  };
  const [{ data = {} }, loading] = useRequest(
    () => basicService.getCoreEnterpriseList(params),
    [pageNum, pageSize, searchForm],
  );

  const formChange = useCallback((value) => {
    /**
     * 表单数值变化
     * */
    const delFlag = { 0: true, 1: false }[value.delFlag];
    setSearchForm({
      ...value,
      delFlag,
    });
  }, []);

  const reset = useCallback(() => {
    /**
     * 重置
     * */
    form.resetFields();
    setSearchForm(form.getFieldsValue());
  }, [form]);

  function addRecord() {
    /**
     * 增加核心企业
     * */
    // 跳转新增核心企业
    navigate('/internetCommercialBank/coreEnterprise/coreEnterpriseDetail');
  }

  function toDetail(record) {
    /**
     * 跳转详情
     * */
    navigate('/internetCommercialBank/coreEnterprise/coreEnterpriseDetail', {
      state: {
        type: 'detail',
        detail: record,
      },
    });
  }

  function toEdit(record) {
    /**
     * 跳转编辑
     * */
    navigate('/internetCommercialBank/coreEnterprise/coreEnterpriseDetail', {
      state: {
        type: 'edit',
        detail: record,
      },
    });
  }

  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      width: 60,
      render: (...record) => {
        return <span>{record[2] + 1}</span>;
      },
    },
    {
      title: '核心企业名称',
      dataIndex: 'coreCustName',
      textWrap: 'word-break',
      ellipsis: true,
    },
    {
      title: '机构英文代码简称',
      width: 150,
      dataIndex: 'dataprovide',
    },
    {
      title: '统一社会信用代码',
      width: 180,
      dataIndex: 'coreCustCode',
    },
    {
      title: 'APPID',
      width: 180,
      dataIndex: 'appId',
    },
    {
      title: 'PID',
      width: 150,
      dataIndex: 'pid',
    },
    {
      title: '方案合约号',
      width: 280,
      dataIndex: 'outUniCode',
    },
    {
      title: '网商角色ID',
      width: 220,
      dataIndex: 'dataOrgId',
    },
    {
      title: '状态',
      width: 100,
      dataIndex: 'delFlag',
      render: (text) => {
        return delFlagMap.get(text) || '';
      },
    },
    // {
    //   title: '操作人',
    //   width: 100,
    //   dataIndex: 'updateBy',
    //   render: (text, record) => {
    //     const person = text || record.createBy;
    //     return person || '';
    //   }
    // },
    // {
    //   title: '操作时间',
    //   width: 200,
    //   dataIndex: 'updateTime',
    //   render: (text, record) => {
    //     const time = text || record.createTime;
    //     if (time) {
    //       return moment(time).format('YYYY-MM-DD HH:mm:ss');
    //     }
    //     return '';
    //   }
    // },
    {
      title: '操作',
      width: 110,
      key: 'action',
      fixed: 'right',
      render: (text, record) => (
        <Space size={10}>
          <span
            className="common-link"
            onClick={() => {
              toEdit(record);
            }}
          >
            编辑
          </span>
          <span
            className="common-link"
            onClick={() => {
              toDetail(record);
            }}
          >
            详情
          </span>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <Form
        form={form}
        name=""
        initialValues={{
          coreCustName: '',
          dataOrgId: '',
          delFlag: '',
        }}
        className="common-table-search-wrap"
        onFinish={formChange}
      >
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item name="coreCustName" label="核心企业名称">
              <Input placeholder="请输入核心企业名称" allowClear />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="dataOrgId" label="网商角色ID">
              <Input placeholder="请输入网商角色ID" allowClear />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="delFlag" label="状态">
              <Select>
                <Option value="" disabled>
                  请选择
                </Option>
                <Option value="1">正常</Option>
                <Option value="0">停用</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={6} className="common-table-search-btn-wrap">
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              搜索
            </Button>
            <Button icon={<ReloadOutlined />} onClick={reset}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <Row className="common-table-operation-wrap">
        <Col>
          <Button type="primary" icon={<PlusOutlined />} onClick={addRecord}>
            新增
          </Button>
        </Col>
      </Row>
      <Table
        rowKey="id"
        columns={columns}
        loading={loading}
        dataSource={data?.list || []}
        scroll={{
          x: 'max-content',
        }}
        pagination={{
          position: ['bottomRight'],
          showSizeChanger: true,
          current: pageNum,
          total: data?.total || 0,
          showTotal: (total) => `共 ${total} 条数据`,
          onChange: (num, size) => {
            let tempNum = num;
            if (size !== pageSize) {
              setPageSize(size);
              tempNum = 1;
            }
            setPageNum(tempNum);
          },
        }}
      />
    </div>
  );
}

export default CoreEnterpriseList;
